<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements.  See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License.  You may obtain a copy of the License at
~
~    http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
-->

<div class="sp-dialog-container">
    <div class="sp-dialog-content p-15">
        <div fxFlex="100">
            <div fxFlex="100" style="margin: 5px; width: 100%">
                <div *ngIf="page === 'select-pipeline'">
                    <h4>{{ pages[0].description }}</h4>
                    <mat-list>
                        <mat-list-item
                            *ngFor="let pipeline of visualizablePipelines"
                            (click)="selectPipeline(pipeline)"
                            class="list-item"
                            [attr.data-cy]="
                                'dashboard-visualize-pipeline-' +
                                pipeline.pipelineName.replaceAll(' ', '_')
                            "
                        >
                            <div
                                matListItemAvatar
                                class="pipeline-avatar sp-accent-bg"
                            >
                                {{ iconText(pipeline.measureName) }}
                            </div>
                            <span matListItemTitle>{{
                                pipeline.pipelineName
                            }}</span>
                            <span matListItemLine>{{
                                pipeline.measureName
                            }}</span>
                        </mat-list-item>
                    </mat-list>
                </div>

                <!-- Select Type -->
                <div *ngIf="page === 'select-widget'" fxLayout="column">
                    <h4>{{ pages[1].description }}</h4>
                    <mat-list>
                        <mat-list-item
                            *ngFor="let widget of availableWidgets"
                            (click)="selectWidget(widget)"
                            class="list-item"
                            [attr.data-cy]="
                                'dashboard-select-widget-' + widget.widgetName
                            "
                        >
                            <div
                                matListItemAvatar
                                class="pipeline-avatar sp-accent-bg"
                            >
                                <span *ngIf="!widget.widgetIconName">{{
                                    iconText(widget.widgetLabel)
                                }}</span>
                                <span *ngIf="widget.widgetIconName"
                                    ><i class="{{ widget.widgetIconName }}"></i
                                ></span>
                            </div>
                            <span matListItemTitle>{{
                                widget.widgetLabel
                            }}</span>
                            <span matListItemLine>{{
                                widget.widgetDescription
                            }}</span>
                        </mat-list-item>
                    </mat-list>
                </div>

                <!-- Select Scheme -->
                <div *ngIf="page === 'configure-widget'" fxLayout="column">
                    <b
                        ><h4>{{ pages[2].description }}</h4></b
                    >
                    <div fxFlex="100" fxLayout="column">
                        <sp-app-static-property
                            *ngFor="let config of selectedWidget.config"
                            [staticProperty]="config"
                            [staticProperties]="selectedWidget.config"
                            [eventSchemas]="[selectedPipeline.eventSchema]"
                            [fieldName]="config.internalName"
                            [parentForm]="parentForm"
                        >
                        </sp-app-static-property>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <mat-divider></mat-divider>
    <div class="sp-dialog-actions">
        <button
            mat-button
            mat-raised-button
            class="mat-basic mr-10"
            (click)="onCancel()"
        >
            Cancel
        </button>
        <button
            mat-button
            mat-raised-button
            class="mat-basic mr-10"
            (click)="back()"
            *ngIf="!('select-pipeline' === page)"
            data-cy="edit-widget-back-btn"
        >
            Back
        </button>
        <button
            mat-button
            mat-raised-button
            color="accent"
            (click)="next()"
            [disabled]="'configure-widget' === page && !formValid"
            *ngIf="page === 'configure-widget'"
            data-cy="dashboard-new-widget-next-btn"
        >
            {{ !editMode && 'configure-widget' === page ? 'Create' : '' }}
            {{ editMode && 'configure-widget' === page ? 'Save' : '' }}
            {{ editMode === null && 'configure-widget' === page ? 'Next' : '' }}
        </button>
    </div>
</div>
